<template>
  <el-container class="container" style="background:#fff">
    <el-header style="padding-top:15px;height:60px;text-align:center">
      <div style="height:80px">
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />&emsp;
        <span>产品类别：</span>
        <el-input v-model="productType" style="width:160px;" type="text" />&emsp;
        <span>料品编码：</span>
        <el-input v-model="materialCode" style="width:160px;" type="text" />&emsp;
        <span>工令单号：</span>
        <el-input v-model="workCode" style="width:160px;" type="text" />&emsp;
        <span>工令站点：</span>
        <el-input v-model="workSite" style="width:160px;" type="text" />&emsp;&emsp;
        <el-button type="primary" icon="el-icon-serach">查询</el-button>
        <el-divider />
      </div>
    </el-header>
    <el-main>
      <div style="width:100%;padding:20px 0;text-align:center">
        <h3>站点FTY</h3>
        <el-table
          ref="table"
          :data="tableData"
          highlight-current-row
          :height="tableHeight"
          style="overflow: auto;width:100%"
          border
        >
          <el-table-column
            v-for="item in tableHead"
            :key="item.label"
            :label="item.label"
            :property="item.property"
            :width="item.width"
          />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          style="float:left;"
          :total="total"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      date: '',
      productType: '',
      materialCode: '',
      workCode: '',
      workSite: '',
      radio: 1,
      radio2: 3,
      tableHeight: document.documentElement.clientHeight - 255 + 'px',
      workshop: '',
      time: 30,
      tableData: [],
      tableHead: [],
      total: 0,
      pagesize: 18,
      currentPage: 1,
      mergeSpanArr: [], // 空数组，记录每一行的合并数
      mergeSpanArrIndex: '' // mergeSpanArr的索引
    }
  },
  watch: {
    tableHeight: function (val) {
      this.tableHeight = val - 195 + 'px'
    }
  },
  created () {
    this.info()
  },
  mounted () {
    this.tableHeight = document.documentElement.clientHeight - 255 + 'px'
    const that = this
    window.onresize = () => {
      return () => {
        that.tableHeight = document.documentElement.clientHeight - 255 + 'px'
      }
    }
  },
  methods: {
    info: function () {
      this.tableHead.push(
        { label: '工令单号', property: 'a0', width: '140' },
        { label: '物料编号', property: 'a1', width: '140' },
        { label: '产品类别', property: 'a2' },
        { label: '工艺站点', property: 'a3' },
        { label: '站点名称', property: 'a4' },
        { label: '投入数量', property: 'a5' },
        { label: '产出数量', property: 'a6' },
        { label: '不良数量', property: 'a7' },
        { label: 'FTY', property: 'a8' }
      )
      for (var i = 0; i < 10; i++) {
        var row = {}
        row['a0'] = '打蛋机' + i
        row['a1'] = i
        row['a2'] = '正常批'
        row['a3'] = 3000
        row['a4'] = 2000
        row['a5'] = '链注入'
        row['a6'] = '注入'
        row['a7'] = '179/230'
        row['a8'] = '待产'
        row['a9'] = '2020-07-12'
        this.tableData.push(row)
      }
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    selectWorkdhop () {},
    selectMonth: function () {
      this.select = true
      var date = new Date().getMonth + 1
      this.time = 500 * 30
      console.log(date)
    },
    selectWeek: function () {
      this.select = false
    },
    openProduct: function () {
      this.drawer = true
    },
    getProduct: function () {},
    selectPart: function (row) {
      this.partTata = []
      this.partTata = row.a5
      this.innerDrawer = true
    }
  }
}
</script>

<style scoped>
.container /deep/ .el-main {
  padding: 0 20px;
}
.container /deep/ .el-icon-search {
  color: red;
  margin-top: 10px;
}
.container /deep/ .el-table th {
  background: #b5bdc5;
  color: #fff;
}
.container {
  color: #606266;
}
.container /deep/ .el-table .cell {
  text-align: center;
}
.container /deep/ .el-input--medium .el-input__inner {
  width: 160px;
}
</style>
